<template>
	<div class="orderUpload" >
        <el-carousel class="pic" height="100%" direction="vertical" :autoplay="true" :interval='15000' indicator-position='none'>
            <el-carousel-item v-for="item in list" :key="item">
                <img :src='item' >
            </el-carousel-item>
        </el-carousel>
		<div class="all">
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" :http-request="ordergo" :before-upload="shangchuanexcel">
                <div class="btn">点击上传</div>
            </el-upload>
            <div class="xian"></div>
            <el-button class="upload2" v-if="show" :loading="downloading" size="small" type="danger" @click="down">{{download}}</el-button>
        </div>
        
	</div>
</template>

<script>
	import axios from 'axios'
	
	export default{
		
		name: 'orderUpload',
		data(){
			return{
                height:"",
                success:"",
                errors:"",
                show:false,
                url:"",
                download:"正在努力的处理信息，请稍后。",
                downloading:false,
                list:[
					
                    'https://file.storep.91haoka.cn/gantanhao/upbg.jpg',
                    'https://file.storep.91haoka.cn/gantanhao/upbg2.jpg',
                    'https://file.storep.91haoka.cn/gantanhao/upbg3.jpg',
                    'https://file.storep.91haoka.cn/gantanhao/upbg4.jpg',
                    'https://file.storep.91haoka.cn/gantanhao/upbg5.jpg',
                ],
				
			}
		},
		created() {
            var h = document.body.scrollHeight
            this.height = h - 200 + 'px'
		},
		methods:{
            shangchuanexcel: function(file) {
                var na = file.name;
                na = na.split(".");
                if (na[na.length - 1] == "xlsx") {
                    if (file.size > 1024 * 1024 * 50) {
                        this.$message.error("文件太大了,分几次上传吧！");
                        return false;
                    } else {}
                } else {
                    this.$message.error("上传格式不正确！");
                    return false;
                }
            },
            down:function(){
                window.open(this.url)
            },
            //订单上传
            ordergo:function(file){
                var that = this
                this.downloading = true
                this.show = true
                this.orderexcle = file.file
                var params = new FormData();
                params.append('file', this.orderexcle);
                axios.post('/api/ROS/plan/shanghai/import',params)
                    .then(data => {
                        if(data.data.msg.code != 0){
                            that.$message.error(data.data.msg.info);
                        }else{
                            that.download = "已生成对应编码，点击下载吧"
                            that.downloading = false
                            that.url = data.data.data
                        }
                        
                    })
            }
		}
	}
</script>

<style lang="scss" scoped>
	.orderUpload{  width: 100%; height: 100%; padding: 100px 0; box-sizing: border-box; display: flex;
                    justify-content: center; align-items: center;
        .pic{ width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1;
            img{ display: block;}
        }
        .all{width: 500px; height: 400px; margin: 0px auto; background: rgba(0,0,0,0.5); border-radius: 5px;
            .btn{ padding: 10px 20px; border-radius: 3px; background: rgba(255,255,255,.8); margin: 20px; font-size: 13px;}
            .el-upload:focus{ color: #000;}
            .order_upload{ padding: 20px;}
            .show{ margin-top: 20px;}
            .li{ line-height: 30px; font-size: 14px;}
            .upload2{ margin: 30px 20px;}
            .xian{ height: 2px; margin: 0 20px; border-bottom: 1px #ffffff dashed;}
            .el-upload-list{ background: rgba(255,255,255,.9); margin: 0 20px;}
        }
	}
</style>
